<template>
  <view>
    <view class="w bac_f">
      <u--form
        labelPosition="left"
        :model="form"
        ref="uForm"
        :rules="rules"
        :error-type="errorType"
      >
        <u-form-item
          label="服务地址"
          prop="address"
          borderBottom
          labelWidth="80"
        >
          <u--input
            v-model="form.address"
            border="none"
            placeholder="请输入服务地址"
          ></u--input>
        </u-form-item>
        <u-form-item label="门牌号" prop="street" borderBottom labelWidth="80">
          <u--input
            v-model="form.street"
            border="none"
            placeholder="请输入门牌号"
          ></u--input>
        </u-form-item>
        <u-form-item label="联系人" prop="name" borderBottom labelWidth="80">
          <u--input
            v-model="form.name"
            border="none"
            placeholder="请输入联系人姓名"
          ></u--input>
        </u-form-item>
        <u-form-item label="手机号" prop="mobile" borderBottom labelWidth="80">
          <u--input
            v-model="form.mobile"
            border="none"
            placeholder="请填写联系人手机号码"
            type="number"
          ></u--input>
        </u-form-item>
      </u--form>
    </view>
    <view class="w bac_f padding30 bz h144 dis_flex mt24">
      <view>
        <view class="fz28">设置默认地址</view>
        <view class="fz24 tf_999 pt10">下单优先使用该地址</view>
      </view>
      <u-switch v-model="value3" size="22" activeColor="#F14537"></u-switch>
    </view>
    <view class="w bac_f h140 tf_4537  tac fz32 p_f dis_f" @click="submit"
      ><view class="w690 lh88 border4537 auto radius8">保存地址</view></view
    >
  </view>
</template>

<script>
import { addressEdit } from "@/config/api.js";
export default {
  data() {
    return {
      userObj: {},
      value3: false,
      errorType: "message",
      // 用户输入内容 传给后台
      form: {
        address: "",
        name: "",
        mobile: "",
        street: "",
      },
      // 校验
      rules: {
        address: [
          {
            required: true,
            message: "请输入服务地址",
            trigger: ["blur", "change"],
          },
        ],
        street: [
          {
            required: true,
            message: "请输入门牌号",
            trigger: ["blur", "change"],
          },
        ],
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: ["blur", "change"],
          },
        ],
        mobile: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["change", "blur"],
          },
          {
            validator: (rule, value, callback) => {
              return uni.$u.test.mobile(value);
            },
            message: "请输入正确的手机号",
            trigger: ["change", "blur"],
          },
        ],
      },
    };
  },
  onLoad(option) {
    this.userObj = JSON.parse(decodeURIComponent(option.page_obj));
    this.form.address = this.userObj.address1;
    this.form.name = this.userObj.name;
    this.form.mobile = this.userObj.phone;
    this.form.street = this.userObj.address2;
    if (this.userObj.default == 1) {
      this.value3 = true;
    } else {
      this.value3 = false;
    }
		console.log(this.userObj);
  },
  methods: {
    // 修改地址
    address_edit() {
      let val = "";
      if (this.value3) {
        val = 1;
      } else {
        val = 2;
      }
      addressEdit({
        id: this.userObj.id,
        address1: this.form.address,
        address2: this.form.street,
        name: this.form.name,
        phone: this.form.mobile,
        default: val,
      }).then((res) => {
        uni.navigateBack({
          delta: 1,
        });
      });
    },
    submit() {
      this.$refs.uForm.validate().then((res) => {
        uni.$u.toast("修改成功");
        if (res) {
          this.address_edit();
        }
      });
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f8f8f8;
  color: #222;
}
.bac_f{
	/deep/ .u-form{
		padding: 0 30rpx 0 30rpx;
			.u-form-item{
				.u-form-item__body {
					padding: 30rpx 0 30rpx 0 !important;
				}
			}
	}
}
</style>
